<template>
    <a-drawer
        :title="user.u_name+'的标签'"
        v-model:visible = "visible"
        closable="true"
        placement="right"
    >
        <div>
            <a-popconfirm
            title="确定要修改标签?"
            @confirm="setTabs"
            placement="left"
            >
                <a-button type="primary">确定</a-button>
            </a-popconfirm>
        </div>
        <a-checkbox-group v-model:value="tabIds">
            <div v-for="t in tabs" :key="t.ut_id">
                <a-checkbox :value="t.ut_id">{{t.ut_name}}</a-checkbox>
            </div>
        </a-checkbox-group>
    </a-drawer>
</template>
<script>
import {ref} from "vue";
import {get, post, tip} from "@/common";
export default{
    setup(){
        const visible = ref(false);
        const user = ref({});
        const tabs = ref({});
        const tabIds = ref([]);

        const open = ((uObj)=>{
            user.value=uObj;
            get("/buser/usermanage/queryTabs?u_id="+user.value.u_id).then((res)=>{
                tabs.value=res.data;
                const temp = [];
                console.log("total tab:" + tabs.value.length);
                for (let i = 0; i < tabs.value.length; i++) {
                    const tab = tabs.value[i];
                    if(tabs.value[i].has){
                        temp.push(tabs.value[i].ut_id);
                    }
                }
                tabIds.value = temp;
            });
            visible.value=true;
        });

        const setTabs = () => {
            const userTabData = {
                u_id: user.value.u_id,
                ut_list: tabIds.value
            }

            post("/buser/usermanage/setUserTab", userTabData).then((res)=>{
                tip.success("标签设置成功!");
            });
        };

        return {
            visible,
            user,
            tabs,
            tabIds,
            open,
            setTabs
        };
    },
};
</script>